<template>
  <div class="tabHeader">
    <el-tabs
      v-model="activeName"
      @tab-click="tabClick"
    >
      <el-tab-pane
        v-for="(tabItem,index) in tabList"
        :key="index"
        :label="tabItem.label"
        :name="tabItem.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang='ts'>
import { first } from 'lodash'
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
@Component({
})
export default class Page extends Vue {
   @Prop({ required: true }) tabActiveName !: any
   @Prop({ required: true }) tabList !: any
   activeName=''
   created() {
     this.activeName = this.tabActiveName
   }

   @Emit()
   tabClick() {
     return this.activeName
   }
}
</script>

<style lang='scss' scoped>
::v-deep .el-tabs__header{
margin: 0;
}
::v-deep .el-tabs__nav-wrap::after{
   background: none;
}
::v-deep .el-tabs{
margin-bottom: -18px;
.el-tabs__item{
    line-height: 20px;
    font-size: 16px;
}
}
</style>
